<template>
  <div class="image-editor-example">
    <div class="header">
      <h2>图片编辑器示例</h2>
      <div class="controls">
        <input 
          type="file" 
          @change="handleFileChange" 
          accept="image/*"
          ref="fileInput"
          style="display: none"
        >
        <el-button @click="selectImage" type="primary">选择图片</el-button>
        <el-button @click="saveImage" :disabled="!imageLoaded">保存图片</el-button>
        <el-button @click="resetImage" :disabled="!imageLoaded">重置</el-button>
        <el-button @click="openEditor" :disabled="!imageLoaded" type="success">编辑图片</el-button>
      </div>
    </div>
    
    <div class="editor-container">
      <!-- 图片预览区域 -->
      <div v-if="currentImageUrl" class="image-preview-container">
        <img :src="currentImageUrl" class="preview-image" alt="图片预览" />
        <div class="preview-overlay">
          <div class="preview-info">
            <div class="image-info">
              <span>尺寸: {{ imageDimensions.width }} x {{ imageDimensions.height }}</span>
            </div>
            <el-button @click="openEditor" type="success" size="large">编辑图片</el-button>
          </div>
        </div>
      </div>

      <!-- 占位符 -->
      <div v-else class="placeholder">
        <i class="el-icon-picture"></i>
        <p>请选择一张图片开始编辑</p>
        <el-button @click="selectImage" type="primary">选择图片</el-button>
      </div>
    </div>
    
    <div class="instructions">
      <h3>使用说明：</h3>
      <ul>
        <li><strong>选择素材：</strong> 点击选择图片按钮上传图片，查看图片预览</li>
        <li><strong>开始编辑：</strong> 点击图片预览区域的"编辑图片"按钮或顶部编辑按钮</li>
        <li><strong>局部重绘：</strong> 选择"局部重绘"→ 使用自动选区选择区域 → 输入提示词 → 执行重绘</li>
        <li><strong>消除功能：</strong> 选择"消除"→ 使用画笔或自动选区选择区域 → 点击底部执行按钮</li>
        <li><strong>画笔工具：</strong> 支持自由绘制和橡皮擦功能</li>
        <li><strong>尺寸调节：</strong> 滑动调节器改变画笔和橡皮擦大小</li>
        <li><strong>保存编辑：</strong> 编辑完成后点击保存按钮下载编辑后的图片</li>
        <li><strong>组件使用：</strong> ImageEditorModal组件支持在任何地方复用，只需传入图片URL即可</li>
      </ul>
    </div>

    <!-- 图片编辑弹窗组件 -->
    <ImageEditorModal
      v-model:visible="editorDialogVisible"
      :image-url="currentImageUrl"
      @close="closeEditor"
      @save="saveEditedImage"
    />
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import ImageEditorModal from '@/components/common/ImageEditorModal.vue'

// Template refs
const fileInput = ref(null)

// 响应式数据
const currentImageUrl = ref('')
const originalImageUrl = ref('')
const imageLoaded = ref(false)
const imageDimensions = ref({ width: 0, height: 0 })

// 编辑弹窗状态
const editorDialogVisible = ref(false)

// 方法定义
const selectImage = () => {
  fileInput.value.click()
}

const handleFileChange = (event) => {
  console.log('handleFileChange', event.target.files)

  const file = event.target.files[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      // 创建图片对象来获取尺寸
      const img = new Image()
      img.onload = () => {
        // 保存图片原始尺寸
        imageDimensions.value = {
          width: img.naturalWidth,
          height: img.naturalHeight
        }
        console.log('图片尺寸:', imageDimensions.value)

        currentImageUrl.value = e.target.result
        originalImageUrl.value = e.target.result
      }
      img.src = e.target.result
    }
    reader.readAsDataURL(file)
  }
}

const handleImageLoaded = () => {
  imageLoaded.value = true
}

const saveImage = () => {
  if (currentImageUrl.value) {
    // 创建下载链接
    const link = document.createElement('a')
    link.download = `original-image-${Date.now()}.png`
    link.href = currentImageUrl.value
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

    ElMessage.success('原始图片已保存')
  }
}

const resetImage = () => {
  if (originalImageUrl.value) {
    // 重置为原始图片
    currentImageUrl.value = originalImageUrl.value
    ElMessage.success('已重置为原始图片')
  }
}

// 打开编辑弹窗
const openEditor = () => {
  if (!currentImageUrl.value) {
    ElMessage.warning('请先选择一张图片')
    return
  }
  editorDialogVisible.value = true
}

// 关闭编辑弹窗
const closeEditor = () => {
  editorDialogVisible.value = false
}

// 保存编辑后的图片
const saveEditedImage = (dataURL) => {
  if (dataURL) {
    // 创建下载链接
    const link = document.createElement('a')
    link.download = `edited-image-${Date.now()}.png`
    link.href = dataURL
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)

    ElMessage.success('编辑后的图片已保存')
    closeEditor()
  }
}
</script>

<style scoped>
.image-editor-example {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.header h2 {
  margin: 0;
  color: #333;
}

.controls {
  display: flex;
  gap: 10px;
}

.editor-container {
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
  min-height: 600px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.placeholder {
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fafafa;
  border: 2px dashed #ddd;
  border-radius: 8px;
  color: #999;
}

.placeholder i {
  font-size: 48px;
  margin-bottom: 16px;
}

.placeholder p {
  margin: 16px 0;
  font-size: 16px;
}

/* 图片预览区域样式 */
.image-preview-container {
  position: relative;
  width: 100%;
  height: 600px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-preview-container:hover .preview-overlay {
  opacity: 1;
}

.preview-info {
  text-align: center;
  color: white;
}

.image-info {
  margin-bottom: 16px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.6);
  padding: 8px 16px;
  border-radius: 20px;
}

.preview-info .el-button {
  background: #67c23a;
  border-color: #67c23a;
  font-size: 16px;
  padding: 12px 24px;
}

.preview-info .el-button:hover {
  background: #85ce61;
  border-color: #85ce61;
}

.instructions {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.instructions h3 {
  margin-top: 0;
  color: #333;
}

.instructions ul {
  margin: 0;
  padding-left: 20px;
}

.instructions li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.instructions strong {
  color: #409eff;
}

/* 自定义弹窗样式 */
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  backdrop-filter: blur(2px);
}

.custom-modal-content {
  position: relative;
  width: 1340px;
  height: 960px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: all 0.3s ease;
  z-index: 10;
}

.modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #333;
  transform: scale(1.1);
}

.modal-close-btn svg {
  width: 20px;
  height: 20px;
}

.modal-editor-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8f9fa;
  padding: 20px;
  overflow: hidden;
}

.modal-editor-container :deep(.image-editor) {
  position: static;
  transform: none;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

.modal-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
}

.modal-btn-cancel {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
}

.modal-btn-cancel:hover {
  background: #e5e7eb;
  color: #374151;
}

.modal-btn-primary {
  background: #3b82f6;
  color: white;
}

.modal-btn-primary:hover {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .custom-modal-content {
    width: 95vw;
    height: 90vh;
  }
}

@media (max-height: 1000px) {
  .custom-modal-content {
    height: 90vh;
  }

  .modal-editor-container {
    padding: 15px;
  }
}
</style>
